<script lang="ts">
  import { currentLanguage, languages } from '../stores/i18n';

  function handleChange(event: Event) {
    const select = event.target as HTMLSelectElement;
    currentLanguage.set(select.value as 'en' | 'zh');
  }
</script>

<select value={$currentLanguage} on:change={handleChange} class="language-select">
  {#each Object.entries(languages) as [code, name]}
    <option value={code}>{name}</option>
  {/each}
</select>

<style lang="scss">
  .language-select {
    padding: 5px;
    border-radius: var(--baseRadius);
    border: 1px solid var(--baseAlt2Color);
    background: var(--baseColor);
    cursor: pointer;
    
    &:hover {
      border-color: var(--baseAlt3Color);
    }
  }
</style> 